<template>
    <div class="listEidtTitQueryTypeWrap">
        <el-form inline>
            <!--label值-->
            <el-form-item label="label值：">
                <el-input
                    v-model="formData.label"
                    placeholder="请输入前方label值"
                    :maxlength="10"
                    clearable
                ></el-input>
            </el-form-item>
            <!--label值-->
            <el-form-item label="绑定值：" required>
                <el-input
                    v-model="formData.labelEnData"
                    placeholder="英文，请输入输入框绑定值"
                    clearable
                ></el-input>
            </el-form-item>
            <!--placeholder值-->
            <el-form-item label="默认提示：" v-if="nowFormType.type != 'datetimerange'">
                <el-input
                    v-model="formData.placeholder"
                    placeholder="请输入默认提示"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item label="开始时间提示：" v-if="nowFormType.type == 'datetimerange'">
                <el-input
                    v-model="formData.startPlaceholder"
                    placeholder="请输入开始时间提示"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item label="结束时间提示：" v-if="nowFormType.type == 'datetimerange'">
                <el-input
                    v-model="formData.endPlaceholder"
                    placeholder="请输入结束时间提示"
                    clearable
                ></el-input>
            </el-form-item>
        </el-form>
        <div class="selectOption" v-if="nowFormType.type == 'Select'">
            <p class="selectLineTit">
                <span>请输入下拉框选项：</span>
                <a 
                    class="addOptionBtn addOptionBtnNo" 
                    @click="addOption()"
                    href="javascript:void(0);">
                    <span>新增选项</span>
                </a>
                <a 
                    class="addOptionBtn addOptionBtnNo" 
                    @click="updateOption()"
                    href="javascript:void(0);">
                    <span>同步</span>
                </a>
            </p>
            <template v-for="(item,index) in optionArray" :key="index"> 
            <div class="selectOptionLine">
                <el-input
                    v-model="item.label"
                    placeholder="options选择名"
                    maxlength="50"
                    clearable
                ></el-input>
                <el-input
                    v-model="item.value"
                    placeholder="选中值"
                    maxlength="50"
                    clearable
                ></el-input>
                <a 
                    @click="deleteOption(index)"
                    class="addOptionBtn" 
                    href="javascript:void(0);">
                    <span>-</span>
                </a>
            </div>
            </template>
        </div>
    </div>
</template>
<script type="text/javascript">
export default {
    data() {
        return {
            nowFormType:{},
            formData:{
                label:"",
                model:"",
                labelEnData:"",
                placeholder:"",
                options:[],
                startPlaceholder:"",
                endPlaceholder:"",

            },
            optionArray:[{
                label:"",
                value:""
            }]
        }
    },
    created() {
        this.$mitt.on("listBtnSelect",this.listBtnSelectMet);
    },
    mounted() {

    },
    destroyed() {
        this.$mitt.off("listBtnSelect",this.listBtnSelectMet);
    },
    watch: {
        formData:{
            handler(){
                this.forMatData();
            },
            deep: true
        }
    },
    components: {

    },
    methods: {
        listBtnSelectMet(item){
            this.resetAdd();
            this.nowFormType = item;
            this.forMatData();
        },
        resetAdd(){
            this.formData.label = "";
            this.formData.model = "";
            this.formData.labelEnData = "";
            this.formData.placeholder = "";
            this.formData.options = "";
        },
        addOption(){
            this.optionArray.push({label:"",value:""})
        },
        deleteOption(index){
            this.optionArray.splice(index,1);
        },
        updateOption(){
            this.formData.options = JSON.parse(JSON.stringify(this.optionArray));
        },
        forMatData(){
            var useParams = {
                ...this.formData,
                ...this.nowFormType
            }
            //处理model
            let searchFormModel = {};
            if(useParams.labelEnData == ''){
                useParams.model = 'blank';
            }else{
                useParams.model = useParams.labelEnData;
            }
            searchFormModel[useParams.model] = "";
            //处理label
            let forMatLabel = useParams.label;
            if(forMatLabel != '' && forMatLabel.indexOf("：") == -1){
                forMatLabel = forMatLabel + '：';
            }
            useParams.label = forMatLabel;

            let searchForm = [];
            searchForm.push(useParams);
            this.$mitt.emit("listTypeInput",{
                searchForm:searchForm,
                searchFormModel:searchFormModel
            });
        }
    }
}
</script>
<style type="text/css" lang="less">
.listEidtTitQueryTypeWrap {
    margin-top:20px;
    border-top:1px solid #E5E6EC;
    padding-top: 20px;
    .el-form-item{
        width: 100%;
    }
    .el-form-item__label{
        width: 30%;
    }
    .selectOption{
        margin-top:20px;
        .selectLineTit{
            font-size:12px;
            color: var(--el-text-color-regular);
        }
        .addOptionBtn{
            display:inline-block;
            width:26px;
            height:26px;
            line-height:26px;
            text-align:center;
            border:1px solid #E5E6EC;
            border-radius:100%;
        }
        .addOptionBtnNo{
            width:96px;
            border-radius:0;
            margin-right:5px;
        }
        .selectOptionLine{
            margin-top:10px;
            .el-input{
                width:38%;
            }
            .el-input{
                margin-right:10px;
            }
        }
    }
}
</style>